<template>
  <div>
    <form class="condition_query">
      <span class="txt">设备类型</span>
      <el-select v-model="type" size="medium" class="inline-input" clearable placeholder="请选择">
        <el-option v-for="item in deviceList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>

      <span class="txt">标段</span>
      <el-select
        v-model="bidSection"
        size="medium"
        class="inline-input"
        clearable
        placeholder="请选择"
        @change="getWorkAreaList">
        <el-option v-for="item in biaoduanList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>

      <span class="txt">工区</span>
      <el-select v-model="areaId" size="medium" class="inline-input" clearable placeholder="请先选择标段">
        <el-option v-for="item in workAreaInfo" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>

      <span class="txt">设备名称</span>
      <el-input v-model="name" size="medium" clearable name="number" class="inline-input" placeholder="请输入" />

      <el-button type="primary" size="medium" icon="el-icon-search" style="margin-left:40px" @click="queryListData">查询</el-button>
    </form>

    <TableModel :table-data="deviceListInfo" :loading="loading">
      <el-table-column prop="name" label="设备名称"></el-table-column>
      <el-table-column prop="typeName" label="设备类型"></el-table-column>
      <el-table-column prop="projectCode" label="项目编号"></el-table-column>
      <el-table-column prop="biaoduanName" label="标段"></el-table-column>
      <el-table-column prop="areaName" label="所属工区"></el-table-column>
      <el-table-column prop="url" label="URL"></el-table-column>
      <el-table-column prop="key" label="Key"></el-table-column>
      <el-table-column prop="deviceSecret" label="Secret"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="editDeviceInfo(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="delDeviceInfo(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </TableModel>

    <Pagination :pageData="pageData" @pageSize="changePageSize" @pageNum="changePageNum" />
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import constants from "../../../util/constants";
import Pagination from "../Pagination";
import TableModel from "../../models/TableModel";
import httpInterface from "../../../util/httpInterface";
import { messageBox } from "../../../util/utils";

export default {
  name: "DeviceList",
  components: { Pagination, TableModel },
  data() {
    return {
      deviceListInfo: [],
      workAreaInfo: [],
      loading: false,
      name: "",
      type: "",
      bidSection: "",
      areaId: "",
      deviceList: constants.ENVIRONMENT_DEVICE_TYPE,
      pageData: {
        pageNum: 1,
        pageSize: 20,
        total: 0
      }
    }
  },

  computed: {
    ...mapState(["biaoduanList", "workAreaList"])
  },

  methods: {
    ...mapActions(["selectByBidSection"]),

    getWorkAreaList() {
      let _this = this;
      this.areaId = "";
      this.selectByBidSection({
        bidSection: this.bidSection,
        fn: function (data) {
          _this.workAreaInfo = data;
        }
      })
    },

    getDeviceList() {
      this.loading = true;
      let { pageData, bidSection, name, type, areaId, deviceList, biaoduanList, workAreaList } = this;
      let params = {
        page: pageData.pageNum,
        size: pageData.pageSize,
      };

      if (bidSection) params.bidSection = Number(bidSection);
      if (name) params.name = name;
      if (type) params.type = Number(type);
      if (areaId) params.areaId = areaId;

      httpInterface.requestPost(this, httpInterface.URL_THIRDPARTY_LIST, params, res => {
        let { other, success } = res.data;
        if (success) {
          let { rows, total } = other;
          rows.forEach(item => {
            deviceList.forEach(key2 => {
              if (item.type == key2.id) item.typeName = key2.name;
            })

            biaoduanList.forEach(key1 => {
              if (item.bidSection == key1.id) item.biaoduanName = key1.name;
            })

            workAreaList.forEach(key => {
              if (item.areaId == key.id) item.areaName = key.name;
            })
          })
          this.deviceListInfo = rows.reverse();
          this.pageData.total = total;
        }
        this.loading = false;
      }, null, true)
    },

    editDeviceInfo(row) {
      this.$emit("showDailog", row.id);
    },

    delDeviceInfo(id) {
      messageBox(() => {
        let params = { id };
        httpInterface.requestGet(this, httpInterface.URL_THIRDPARTY_DELETE, params, res => {
          let { success } = res.data;
          if (success) {
            this.$message.success("删除成功！");
            this.getDeviceList();
          } else {
            this.$message.error("删除失败！");
          }
        }, null)
      })
    },

    queryListData() {
      this.getDeviceList();
    },

    changePageSize(size) {
      this.pageData.pageSize = Number(size);
      this.getDeviceList();
    },

    changePageNum(num) {
      this.pageData.pageNum = Number(num);
      this.getDeviceList();
    }
  }
}
</script>

<style scoped lang="scss">
.condition_query {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.txt {
  margin-right: 10px;
  font-size: 14px;
}

.inline-input {
  width: 150px;
  margin-right: 22px;
}
</style>
